<script setup>
import { ref } from 'vue'

const destinations = ref([
  { name: '北京', image: '🏛️', price: '¥299起', desc: '历史文化名城' },
  { name: '上海', image: '🏙️', price: '¥399起', desc: '国际大都市' },
  { name: '杭州', image: '🏞️', price: '¥199起', desc: '西湖美景' },
  { name: '成都', image: '🐼', price: '¥259起', desc: '天府之国' },
  { name: '三亚', image: '🏖️', price: '¥599起', desc: '热带海岛' },
  { name: '厦门', image: '🌊', price: '¥329起', desc: '滨海风光' },
  { name: '西安', image: '🏺', price: '¥279起', desc: '古都文化' },
  { name: '青岛', image: '🍺', price: '¥359起', desc: '海滨城市' }
])

const selectDestination = (dest) => {
  console.log('选择目的地:', dest)
  // 可以跳转到详情页或搜索结果页
}
</script>

<template>
  <div class="destination-page">
    <div class="page-header">
      <h1 class="page-title">热门目的地</h1>
      <p class="page-subtitle">探索更多精彩旅行</p>
    </div>
    <div class="destinations-grid">
      <div
        v-for="dest in destinations"
        :key="dest.name"
        class="destination-card"
        @click="selectDestination(dest)"
      >
        <div class="dest-image">{{ dest.image }}</div>
        <div class="dest-info">
          <div class="dest-name">{{ dest.name }}</div>
          <div class="dest-desc">{{ dest.desc }}</div>
          <div class="dest-price">{{ dest.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.destination-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  padding-bottom: 100px;
}

.page-header {
  text-align: center;
  padding: 20px 0;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 14px;
  color: #666;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.destination-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s;
}

.destination-card:active {
  transform: scale(0.98);
}

.dest-image {
  font-size: 48px;
  margin-bottom: 12px;
}

.dest-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.dest-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.dest-price {
  font-size: 16px;
  color: #ff6b35;
  font-weight: 600;
}
</style>

